<template>
  <div class="projectList">
    <!-- <el-button type="primary" @click="addProject(0)">添加新项目</el-button> -->
    <el-input v-model.trim="keywords" style="width: 200px" clearable placeholder="请输入项目名/负责人" size="small"></el-input>
    <el-select v-model="level" placeholder="请选择" clearable size="small">
      <el-option v-for="item in gradeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
    </el-select>
    <el-button type="primary" @click="search" size="small">搜索</el-button>
    <br />
    <br />
    <el-tabs v-model="plateId" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane v-for="(item, index) in plateOption" :key="index" :label="item.name"
        :name="item.id + ''"></el-tab-pane>
    </el-tabs>
    <base-table ref="baseTable" :tableSetting="tableSetting" @handleCommon="handleCommon"></base-table>

    <!--  启动项目-->
    <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="dialogRecord" width="400px" center
      title="重新启动该项目">
      <el-select v-model="runStart" placeholder="请选择" style="width: 100%" @change="runStartChange()">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <span class="dialogFooter">
        <el-button @click="dialogRecord = false">取 消</el-button>
        <el-button type="primary" @click="addRecord()" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 记录 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogRecordflag" width="805px" center @close="__close">
      <div class="rscordTop">
        <p>
          <span>
            <h1 class="level1" v-if="this.proInfo.level == 'A'">
              {{ proInfo.level }} 级
            </h1>
            <h1 class="level2" v-if="this.proInfo.level == 'B'">
              {{ proInfo.level }} 级
            </h1>
            <h1 class="level3" v-if="this.proInfo.level == 'C'">
              {{ proInfo.level }} 级
            </h1>
            <h1 class="level4" v-if="this.proInfo.level == 'D'">
              {{ proInfo.level }} 级
            </h1>
            <h3>{{ proInfo.name }}</h3>
            <span>负责人：{{ proInfo.leader1name }}</span>
          </span>
          <span>
            <span>{{ proInfo.realStartDate }}至{{ proInfo.planEndDate }}</span>
            <span>{{ proInfo.prjStatus }}</span>
          </span>
        </p>
        <div class="mainWrap">
          <el-input style="width: 655px; margin-left: -13px" type="textarea" :autosize="{ minRows: 7, maxRows: 12 }"
            @input="handleChangeText" placeholder="请输入内容" v-model="content"></el-input>
        </div>
      </div>
      <span class="dialogFooter">
        <el-button @click="dialogRecordflag = false">取 消</el-button>
        <el-button type="primary" @click="handleAddRecord('form')" :loading="loading">确 定</el-button>
      </span>
      <el-timeline v-if="recordList.length > 0">
        <el-timeline-item v-for="(item, index) in recordList" :key="index" :timestamp="item.createTime.replace('T', ' ')"
          placement="top">
          <el-card>
            <el-row class="content-box" type="flex" justify="space-between">
              <el-col :span="22">
                <el-input type="textarea" autosize placeholder="请输入内容" v-model="item.content">
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-button size="mini" @click="delRecord(item)" class="closeBtn el-icon-delete" round></el-button>
              </el-col>
            </el-row>

            <!-- <h4> -->
            <!-- <pre class="text-wrap">{{ item.content }}</pre> -->
            <!-- </h4> -->
            <p>
              {{ item.recordName }} 提交于
              {{ item.createTime.replace("T", " ") }}
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <p v-else style="text-align: center">--暂无记录--</p>
      <!-- 分页 -->
      <el-pagination style="text-align: right" background @size-change="handleSizeChange"
        @current-change="handleChangePage" :current-page="pn" :page-sizes="[5, 10, 15, 20, 30, 40]" :page-size="ps"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import baseTable from "@/components/table/baseTable";
import {
  selectProjectListByReq,
  insertProject,
  selectProjectPlate,
  selectAllUser,
  updateProject,
  selectProjectRecord,
  insertProjectRecord,
  deleteProjectRecord,
  selectProjectById,
  restartProeject,
} from "@/service/Api.js"; //接口
export default {
  components: { baseTable },
  name: "projectMent",
  data() {
    return {
      tableSetting: {
        defaulteParams: {
          projectNameKeyWord: "",
          principalNameKeyWord: "",
          level: "",
          plateId: "",
          status: "10",
        },
        tableApiFn: selectProjectListByReq,
        options: [
          { prop: "id", label: "ID" },
          { prop: "fullName", label: "项目全称" },
          { prop: "name", label: "项目简称" },
          // { prop: "contractUnit", label: "合同单位" },
          // { prop: "mainUnit", label: "主体单位" },
          // {
          //   prop: "projectTypeName",
          //   label: "项目类型",
          //   sortable: "custom"
          // },
          { prop: "level", label: "项目级别" },
          { prop: "realStartDate", label: "开始日期" },
          { prop: "planEndDate", label: "计划结束日期" },

          { prop: "leader1name", label: "项目经理" },
          { prop: "manhour", label: "已用工时" },
          { prop: "prjStatus", label: "项目状态" },
        ],
        width: "580",
        btns: [
          { text: "记录", size: "mini", handleName: "handleRecord" },
          {
            text: "进度管理",
            type: "success",
            size: "mini",
            handleName: "goProgressManager",
          },
          {
            text: "查看工时",
            size: "mini",
            handleName: "tomanHour",
            type: "info",
          },
          { text: "启动该项目", size: "mini", handleName: "record" },
          {
            text: "查看日报",
            size: "mini",
            handleName: "handleDaily",
            type: "info",
          },
        ],
      },
      dialogStation: false,
      form: {
        fullName: "",
        name: "",
        contractUnit: "",
        mainUnit: "",
        projectType: "",
        projectTypeName: "",
        level: "",
        plateId: "",
        realStartDate: "",
        planEndDate: "",
        leader1: "",
        status: "",
        realEndDate: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: ["blur", "change"],
          },
        ],
        plateId: [
          {
            required: true,
            message: "请选择所属板块",
            trigger: ["blur", "change"],
          },
        ],
        realStartDate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
        leader1: [
          {
            required: true,
            message: "请选择项目经理",
            trigger: ["blur", "change"],
          },
        ],
        status: [
          {
            required: true,
            message: "请选择项目状态",
            trigger: ["blur", "change"],
          },
        ],
      },
      loading: false,
      titleStation: "",
      memberList: [],
      keywords: "",
      level: "",
      plateId: "0",
      gradeList: [
        {
          id: "A",
          label: "A",
        },
        {
          id: "B",
          label: "B",
        },
        {
          id: "C",
          label: "C",
        },
        {
          id: "D",
          label: "D",
        },
      ],
      plateOption: [],
      falg: "",
      id: "",
      //记录
      dialogRecordflag: false,
      dialogRecord: false,
      dialogRunstart: false, //启动项目
      projectId: "",
      recordList: [],
      pn: 1,
      ps: 10,
      total: 0,
      content: "",
      proInfo: "",
      options: [
        {
          value: "1",
          label: "立项",
        },
        {
          value: "2",
          label: "需求分析",
        },
        {
          value: "3",
          label: "系统设计",
        },
        {
          value: "4",
          label: "编码实现",
        },
        {
          value: "5",
          label: "内部测试",
        },
        {
          value: "6",
          label: "线上测试",
        },
        {
          value: "7",
          label: "上线试运行",
        },
        {
          value: "8",
          label: "已交付",
        },
      ],
      runStart: "1",
      proStatus: "", //项目阶段值
      projectId: "", //要重启的项目值
    };
  },
  created() {
    this.plateList();
  },
  methods: {
    handleCommon(name, row, idx) {
      if (this[name]) {
        this[name](row, idx);
      }
    },
    // 板块列表
    plateList() {
      selectProjectPlate().then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.plateOption = res.data;
          console.log(this.plateOption);
        }
      });
    },
    handleClick() {
      this.search();
    },

    //重启项目--选择项目状态阶段
    runStartChange() {
      console.log(this.runStart);
    },
    // 记录
    handleRecord(row) {
      this.projectId = row.id;
      this.projectInfo();
      this.recordOption();
      this.dialogRecordflag = true;
    },
    // 确定提交记录
    handleAddRecord() {
      if (!this.content) {
        this.$message.warning("请输入内容！");
        return;
      }
      let data = {
        projectId: this.projectId,
        content: this.content,
        type: "1",
      };
      insertProjectRecord(data).then((res) => {
        if (res.code == 0) {
          this.content = "";
          this.$message.success("添加成功！");
          this.recordOption();
        }
      });
    },
    // 输入记录
    handleChangeText(val) {
      console.log("输入记录", val);
      if (val && val.length % 44 === 0) {
        this.content += "/\n";
      }
    },
    __close() {
      this.$refs.baseTable.initData();
    },
    // 删除记录
    delRecord(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteProjectRecord(row.id).then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功！");
              this.recordOption();
            } else {
              this.$message.error(response.message);
            }
          });
        })
        .catch(() => { });
    },

    // 搜索
    search() {
      (this.tableSetting.defaulteParams = {
        projectKeyWord: this.keywords,
        level: this.level,
        plateId: this.plateId,
      }),
        this.$refs.baseTable.initData(null, 1);
    },
    handleChangePage(index) {
      this.pn = index;
      this.recordOption();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.recordOption();
    },
    //记录列表
    recordOption() {
      let data = {
        pn: this.pn,
        ps: this.ps,
        projectId: this.projectId,
        recordType: "1",
      };
      selectProjectRecord(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.recordList = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    //项目信息
    projectInfo() {
      selectProjectById(this.projectId).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.proInfo = res.data;
        }
      });
    },
    //进入进度管理
    goProgressManager(row) {
      this.$router.push({
        path: "/progressManager",
        query: { projectId: row.id, isclose: true },
      });
    },
    // 启动项目
    record(row) {
      console.log(row);
      this.projectId = row.id;
      this.dialogRecord = true;
    },

    // 查看日报
    handleDaily(row) {
      // /allDaily
      this.$router.push({
        path: "/allDaily",
        query: { projectId: row.id, projectName: row.name, condition: 2 },
      });
    },
    // 重启项目
    addRecord() {
      let data = {
        status: this.runStart,
        projectId: this.projectId,
      };
      console.log(data);
      restartProeject(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message.success("启动成功!");
          this.dialogRecord = false;
          this.$refs.baseTable.initData();
        } else {
          this.$message.warning("操作失败!");
        }
      });
    },
    //工时管理
    tomanHour(row) {
      this.$emit("subset", { falg: 3, projectid: row.id });
    },
    managerData() {
      selectAllUser().then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.memberList = res.data;
        } else {
          this.$message.warning(res.message);
        }
      });
    },
  },
};
</script>

<style scoped>
.rscordTop p {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
}

.rscordTop p span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
}

.rscordTop p span h1,
.rscordTop p span h3 {
  margin: 0;
}

.rscordTop p span:nth-child(2) span {
  text-align: right;
  display: block;
}

.el-textarea__inner {
  min-height: 200px;
}

.dialogFooter {
  display: block;
  width: 100%;
  text-align: right !important;
  margin-top: 10px;
}

.content-box {
  margin-bottom: 15px;
}

.closeBtn {
  /* float: right; */
  margin-left: 10px;
}

.el-timeline {
  max-height: 450px;
  overflow: auto;
  padding: 0;
}

.el-card__body h4,
.el-card__body p {
  margin-top: 0;
}

.mainWrap {
  text-align: center;
}
</style>
